<template>
    <base-e-chart :option="chartOption" />
</template>

<script>
import BaseEChart from '@/components/common/BaseEChart.vue'
import dayjs from 'dayjs'

export default {
    name: 'LineChart',
    components: {
        BaseEChart
    },
    props: {
        chartData: {
            type: Object,
            required: true,
        },
        timeGrain: {
            type: String,
            required: true,
        },
    },
    data() {
        return {
            dateFormat: {
                year: 'YYYY',
                month: 'YYYY-MM',
                day: 'YYYY-MM-DD',
            },
            chartOption: this.getDefaultOption()
        }
    },
    methods: {
        getDefaultOption() {
            return {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#ffffff',
                        },
                    },
                    backgroundColor: 'rgba(0,35,92,0.9)',
                    borderWidth: 1,
                    padding: [10, 15],
                    textStyle: {
                        color: '#fff',
                        fontSize: 14,
                    },
                    extraCssText: `
                        box-shadow: inset 0px 0px 27px 0px rgba(0,156,255,0.3);
                        border-radius: 4px;
                        border: 1px solid transparent;
                        border-image: linear-gradient(360deg, rgba(3, 102, 186, 1), rgba(0, 221, 255, 0.89), rgba(3, 102, 186, 1)) 1;
                    `,
                    formatter: (params) => {
                        let result = dayjs(this.chartData.dates[params[0].dataIndex])
                            .format(this.dateFormat[this.timeGrain]) + '<br/>'
                        params.forEach((param) => {
                            result += `${param.marker} ${param.seriesName}: ${param.value}<br/>`
                        })
                        return result
                    },
                },
                legend: {
                    data: ['指标值', '标杆值', '约束值'],
                    textStyle: {
                        color: '#9AC0EF',
                    },
                    left: 'right',
                },
                grid: {
                    top: '60px',
                    right: '10px',
                    left: '20px',
                    bottom: '0px',
                    containLabel: true,
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisLabel: {
                        color: '#9AC0EF',
                        interval: (index) => {
                            const totalPoints = this.chartData.dates.length
                            if (totalPoints > 30) {
                                const interval = Math.floor(totalPoints / 15)
                                return index % interval === 0
                            }
                            return true
                        },
                        rotate: 45,
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#9AC0EF',
                        },
                    },
                },
                yAxis: {
                    type: 'value',
                    name: '单位(kwh/m²)            ',
                    nameTextStyle: {
                        color: '#9AC0EF',
                        padding: [0, 0, 0, 40],
                    },
                    axisLabel: {
                        color: '#9AC0EF',
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#9AC0EF',
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#ffffff33',
                            type: 'dashed',
                        },
                    },
                    splitNumber: 5,
                    axisTick: {
                        show: true,
                    },
                },
                series: [
                    {
                        name: '指标值',
                        type: 'bar',
                        barWidth: '15',
                        data: [],
                        itemStyle: {
                            color: '#00FFFF',
                        },
                    },
                    {
                        name: '标杆值',
                        type: 'line',
                        data: [],
                        itemStyle: {
                            color: '#FF6B00',
                        },
                        lineStyle: {
                            color: '#FF6B00',
                            width: 1,
                        },
                        symbol: 'none',
                    },
                    {
                        name: '约束值',
                        type: 'line',
                        data: [],
                        itemStyle: {
                            color: '#CCFF00',
                        },
                        lineStyle: {
                            color: '#CCFF00',
                            width: 1,
                        },
                        symbol: 'none',
                    },
                ],
            }
        },
        updateChartData() {
            this.chartOption.xAxis.data = this.chartData.dates.map(date =>
                dayjs(date).format(this.dateFormat[this.timeGrain])
            )
            this.chartOption.series[0].data = this.chartData.values
            this.chartOption.series[1].data = this.chartData.benchmark
            this.chartOption.series[2].data = this.chartData.constraint
        }
    },
    watch: {
        chartData: {
            handler() {
                this.updateChartData()
            },
            deep: true
        }
    }
}
</script>
